<script lang="ts" setup>
import { useOverviewStore } from '~/stores/request'
const visible = ref(false)
const selected = ref('')
const overviewStore = useOverviewStore()
const deleteIt = useDropTable({})
const truncate = useTruncateTable({})
const result = computed(() => {
  return overviewStore.state?.data
})
const fmtNo = (num: number) => {
  return num.toLocaleString('zh-CN')
}
const onEdit = (table: string) => {
  selected.value = table
  visible.value = true
}
const onDel = (table: string) => {
  deleteIt.refresh({ table })
  overviewStore.state?.refresh()
}
const onClear = (table: string) => {
  truncate.refresh({ table })
  overviewStore.state?.refresh()
}
const handleCommit = () => {
  overviewStore.state?.refresh()
  visible.value = false
}
</script>

<template>
  <div class="w-full">
    <EditDialog 
      v-model:visible="visible" 
      :title="$t('edit_table')"
      :table="selected"
      :createable="false"
      @commit="handleCommit"
    />
    <div class="grid-container">
      <div 
        class="grid-item" 
        v-for="item in result" 
        :key="item.label"
      >
        <div class="card">
          <div class="row flex justify-between">
            <div class="left flex items-end">
              <SVGIcon type="table" />
              <div class="text">{{ item.label }}</div>
            </div>
            <div class="right">
              <span class="number">{{ fmtNo(item.value) }}</span>
              条
            </div>
          </div>
          <div class="row mt-5px">
            <el-progress :percentage="Number(item.used)" />
          </div>
          <div class="row flex mt-10px">
            <Button @click="onEdit(item.label)" icon="edit" :fill="true">
              {{ $t('edit') }}
            </Button>
            <ConfirmTip @ok="onDel(item.label)">
              <Button icon="del" :fill="true" class="ml-10px">
                {{ $t('delete') }}
              </Button>
            </ConfirmTip>
            <ConfirmTip @ok="onClear(item.label)">
              <Button icon="truncate" :fill="true" class="ml-10px">
                {{ $t('truncate') }}
              </Button>
            </ConfirmTip>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.ml-10px {
  margin-left: 10px;
}

.mt-10px {
  margin-top: 10px;
}

.mt-5px {
  margin-top: 5px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 10px; 
  width: 100%;
}

.grid-item {
  width: 100%; 
}

.card {
  border-radius: var(--el-radius);
  border: 1px solid var(--el-border-color);
  padding: 0 10px 10px 10px;
  width: 100%; 
}

.number {
  font-size: 29px;
  font-weight: bold;
}

.text {
  margin-left: 4px;
  transform: translateY(1px);
}
.left {
  transform: translateY(-10px);
}
</style>
